{% extends 'system/yui/base-yui.html' %}


{% block scripts %}

<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/editor/assets/skins/sam/simpleeditor.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/container/container_core-min.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/editor/simpleeditor-min.js"></script>

{% endblock scripts %}

{% block content %}
	<textarea id='yui-textarea' name='yui-textarea'></textarea>
	<script language='javascript'>
	//Create callback function
	(function() { 
			////////////////////////////////////////////////////////
			// ! init the yui element
			////////////////////////////////////////////////////////			
		    	// Defaults
		    		//var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; 
			    // Set default value
			    	document.getElementById('yui-textarea').value = zajyui.field.value;
			    // Load the simple editor
					// 85 is an approximate height of the toolbar...this is calculated exactly below during the post-render...
					zajyui.field.control = new YAHOO.widget.SimpleEditor('yui-textarea', {
			            height: (zajyui.iframe.clientHeight-85)+'px', 
			            width: zajyui.iframe.clientWidth+'px',
			            animate: true,
						toolbar: {
						    titlebar: '',
				            collapse: true,
				            grouplabels: false,
						    buttons: [
						        { group: 'textstyle', label: 'stílus',
						            buttons: [
						                { type: 'push', label: 'Bold', value: 'bold' },
						                { type: 'push', label: 'Italic', value: 'italic' },
						                { type: 'push', label: 'Underline', value: 'underline' },
						                { type: 'separator' },
						                { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
						                { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
						            ]
						        }
						    ]
						 }
									
					});
					//zajyui.zajlib.log(zajyui.field.control);
			////////////////////////////////////////////////////////
			// ! add events
			////////////////////////////////////////////////////////
				// update original field on blur	
					zajyui.field.control.on('editorWindowBlur',function(){
						// log event
							zajyui.zajlib.log('yui element has changed - updating mozajik...');
						// get my html value
							zajyui.field.control.saveHTML();
						// send to callback function	
							zajyui.field.onYuiChange(document.getElementById('yui-textarea').value);
					});
				// add my post-init event
					//zajyui.field.control.on('afterRender',afterInit);	// global post-init
					zajyui.field.control.on('afterRender',postRender);	// local post-init
				// callback function for changed zaj field
					zajyui.field.onZajChange = function(newvalue){
						// log event
							zajyui.zajlib.log('mozajik element has changed - updating yui...');
					};

			////////////////////////////////////////////////////////
			// ! render me
			////////////////////////////////////////////////////////
				// fire event before render
					zajyui.fireEvent('beforeRender');
			 	// finally, render it!
			  		zajyui.field.control.render();
			
			////////////////////////////////////////////////////////
			// ! post-render stuff
			////////////////////////////////////////////////////////
				function postRender(){
					// add event for collapse and expand of toolbar
						zajyui.field.control.toolbar.on('toolbarCollapsed',function(){							
							zajyui.field.control.set('height',(zajyui.iframe.clientHeight-zajyui.field.control.toolbar._titlebar.clientHeight)+'px');
						});
						zajyui.field.control.toolbar.on('toolbarExpanded',function(){							
							zajyui.field.control.set('height',(zajyui.iframe.clientHeight-parseInt(zajyui.field.control.toolbar.getStyle('height')))+'px');
						});
					// do default
						zajyui.field.control.set('height',(zajyui.iframe.clientHeight-parseInt(zajyui.field.control.toolbar.getStyle('height')))+'px');					
					afterInit();
				}


	})(); 
	</script>
{% endblock content %}

